<template>
  <div class="page-container">
    <div>
      <div class="title-img-wr">
        <img src="../../assets/images/login/title.png" alt="">
      </div>
      <div class="forgot-password">
        <button type="text" v-show="active >= '1'" class="return-page-wr" @click="$router.go(-1)"> <i
            class="el-icon-arrow-left"></i> 上一步 </button>
        <button type="text" v-show="active == '0'" class="return-page-wr" @click="$router.push({ path: '/login' })"> <i
            class="el-icon-arrow-left"></i> 返回 </button>
        <div class="content">
          <el-steps :active="active" finish-status="success">
            <el-step title="账号验证"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="完成设置"></el-step>
          </el-steps>
          <div v-if="active == '0'">
            <el-form ref="verificationForm" :model="verificationForm" :rules="verificationFormRules" class="demo-ruleForm"
              @submit.native.prevent>
              <el-form-item prop="account" label="用户名">
                <el-input v-model="verificationForm.account" type="text" placeholder="用户名">
                </el-input>
              </el-form-item>
              <el-form-item prop="secQueId" label="选择密保问题">
                <el-select v-model="verificationForm.secQueId" class="wid">
                  <el-option v-for="item in options" :key="item.id" :label="item.problem" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="answer" label="答案">
                <el-input v-model="verificationForm.answer" type="text" placeholder="不超过10个字符">
                </el-input>
              </el-form-item>
            </el-form>
            <!--            <el-button style="margin-top: 12px;" @click="checkSecurityQuestion">下一步</el-button>-->
            <div class="btn-wr">
              <button type="button" class="login-btn" @click.prevent="checkSecurityQuestion">下一步 <i
                  class="el-icon-arrow-right"></i></button>
            </div>
          </div>
          <div v-if="active == '1'">
            <el-form ref="forgotPasswordForm" :model="forgotPasswordForm" :rules="forgotPasswordFormRules"
              class="demo-ruleForm" @submit.native.prevent>
              <el-form-item prop="pwd" label="密码:">
                <el-input v-model="forgotPasswordForm.pwd" type="password" placeholder="6-16位大小写字母+数字组合"
                  auto-complete="off">
                </el-input>
              </el-form-item>
              <el-form-item prop="confirmPwd" label="确认密码:">
                <el-input v-model="forgotPasswordForm.confirmPwd" placeholder="重复密码" type="password">
                </el-input>
              </el-form-item>
            </el-form>
            <div class="btn-wr">
              <button type="button" class="login-btn" @click.prevent="resetPassword">确认 <i
                  class="el-icon-arrow-right"></i></button>
            </div>
          </div>
          <div v-if="active == '2'">
            <div class="reset-success">
              <img src="../index/assets/images/success.png" alt="">
              <p class="set-success">设置成功，去登录</p>
            </div>
            <div class="btn-wr">
              <button type="button" class="login-btn" @click="$router.push({ path: '/login' })">登录 <i
                  class="el-icon-arrow-right"></i></button>
            </div>
          </div>
        </div>


      </div>

    </div>

  </div>
</template>

  
<script>

</script>

<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow-y: auto;
  background: url("../../assets/images/login/login-bag.jpg") no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .wid {
    width: 100%;
  }

  .title-img-wr {
    text-align: center;
  }

  .forgot-password {
    .return-page-wr {
      position: relative;
      top: 30px;
      left: 30px;
      color: #e5525b;
      font-size: 16px;
      margin-bottom: 15px;

      i {
        font-size: 20px;
        vertical-align: middle;
      }
    }

    width:580px;
    height:540px;
    background: #FFFFFF;
    border-radius: 6px;

    .content {
      padding: 30px 90px;
      box-sizing: border-box;
    }

    /deep/.el-step.is-horizontal {
      .el-step__line {
        height: 2px;
        top: 20px;
        left: 48px;
        right: 10px;
      }
    }

    /deep/.el-step__icon {
      width: 42px;
      height: 42px;
      color: #e6545a;
      font-size: 18px;
      border: 2px solid #e6545a;
    }

    /deep/.el-step__line {
      background: #e6545a;
    }

    /deep/.is-process {
      .el-step__icon {
        background: #e6545a;
        color: #FFFFFF;
        border: 0px;

      }
    }

    /deep/.el-step__head {
      margin-bottom: 20px;
    }

    /deep/.el-step__title.is-process {
      color: #e6545a;
    }


    /deep/.el-form-item__label {
      width: 100%;
      text-align: left;
    }

    /deep/.el-form-item__content {
      display: inline-block;
      width: 100%;
      margin-left: 0px;
    }
  }

  .btn-wr {
    text-align: center;
  }

  .reset-success {
    text-align: center;
    margin: 60px 0;
  }

  .set-success {
    margin-top: 20px;
    font-weight: 600;
  }

  .login-btn {
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0 auto;
    background: #e6545a;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: 4px;

    i {
      right: -50px;
      font-size: 27px;
      position: relative;
      vertical-align: middle;
    }
  }
}</style>
